<template>
  <div class="page_comNotice">
    <van-nav-bar title left-arrow @click-left="$router.back()" ref="vanBar">
      <template #title>
        <van-search
          placeholder="搜索本公司信息"
          background="transparent"
          shape="round"
          disabled
          @click="toSearch"
        >
          <template #action>
            <div @click="toSearch">搜索</div>
          </template>
        </van-search>
      </template>
    </van-nav-bar>
    <div class="listDiv">
      <div class="list" v-for="(item, index) in noticeList" :key="index">
        <div class="character">{{ item.intro }}</div>
        <van-row gutter="20" class="photos" v-if="item.imgurl">
          <van-col span="8" v-for="(image, index) in item.imgurl.split(',')" :key="index">
            <van-image width="110" height="110" :src="image" @click="bigImage(image)" />
          </van-col>
        </van-row>
        <div class="notice-bottom">
          <div class="bottom-content">
            <div class="notice-name">{{ item.addusername }}</div>
            <div class="notice-time">{{ item.createdate }}</div>
            <div class="notice-type" v-if="active == 0">{{ item.type == 0 ? '公告通知' : '公告任务' }}</div>
          </div>
        </div>
      </div>
      <div class="tips">没有数据了</div>
    </div>
    <!-- tarbar -->
    <van-tabbar v-model="active" class="company-tarbar" active-color="#ee0a24">
      <van-tabbar-item :icon="item.icon" @click="onTarbar(index)" v-for="(item, index) in tarBarValue" :key="index">
        {{item.value }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import {ImagePreview} from 'vant'
import ComNoticeListOper from '../../components/comNoticeListOper.vue'
export default {
  components: {
    ComNoticeListOper
  },
  data() {
    return {
      showOverlay: false,
      listShowOverlay: false,
      active: 0,
      message: '',
      photos: '',
      noticeList: [],
      // todo 后端返回了这个total数据, 请前端同事去做一下分页
      total: 0,
      companyId: '',
      tarBarValue: [
        {
          value: '公告首页',
          icon: 'home-o'
        },
        {
          value: '公告通知',
          icon: 'comment-o'
        },
        {
          value: '公告任务',
          icon: 'todo-list-o'
        }
      ]
    }
  },
  async created() {
    if (this.$route.params.id) {
      this.companyId = this.$route.params.id
    } else {
      this.$router.back()
    }
    this.getNotice()
  },
  methods: {
    bigImage(img) {
      ImagePreview({
        images: [img],
        closeable: true
      })
    },
    // 搜索框事件
    toSearch() {
      this.$router.push({
        path: `/searchNotice/${this.companyId}`
      })
    },
    //查询公司公告
    async getNotice() {
      const formData = {
        company_id: this.companyId,
        type: this.active - 1,
        key: ''
      }
      const res = await this.$api.company.reqGetComNotice(formData)
      if (res.code === 200) {
        this.noticeList = res.data.items
        this.total = res.data.total
      }
    },
    upNotice(type) {
      this.$router.push({
        path: `/myCompany/upNotice/${type}`
      })
    },
    onTarbar(index) {
      this.active = index
      this.getNotice()
    }
  }
}
</script>
<style lang="less">
.page_comNotice {
  min-height: 100vh;
  background: #fff;
  .listDiv {
    .tips {
      margin-top: 1.33333rem;
      padding-bottom: 3rem;
      text-align: center;
    }
  }
  .over_layer {
    margin-top: 46.6px;
    height: 100%;
    .layer {
      width: 40%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  .list {
    border-bottom: 0.02667rem solid #ebedf0;
    .notice-bottom {
      margin: 0 0.42667rem;
      margin-bottom: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #999;
      .bottom-content {
        display: flex;
        align-items: center;
        .notice-type {
          margin-left: 1.5rem;
        }
        .notice-name {
          margin-right: 5px;
        }
        .notice-time {
          margin-top: 0.03rem;
        }
      }
      .bottom-boole {
        margin-right: 10px;
        color: #3d2c63;
      }
    }
    .character {
      margin: 0 0.42667rem;
      margin-top: 0.3rem;
      padding: 0.1rem 0;
      font-size: 0.37333rem;
    }
    .photos {
      padding: 0.26667rem 0.42667rem;
      .van-col {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
